<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Status Tap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>

<body onload="init()">
  <ion-app>
    <ion-status-tap></ion-status-tap>

      <ion-header>
        <ion-toolbar>
          <ion-title>Status Tap</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content padding>
        <div class="really-big">
          <ion-button class="shawty-got-low">Mock Status Tap</ion-button>
        </div>
      </ion-content>

  </ion-app>
</body>

<script>
  async function init() {
    const button = document.querySelector('ion-button');
    await button.componentOnReady();
    button.addEventListener('click', async () => {
      await doStatusTap();
    });
  }

  async function doStatusTap() {
    const statusTap = document.querySelector('ion-status-tap');
    await statusTap.componentOnReady();
    return await statusTap.mockTap();
  }

</script>

<style>
  .really-big {
    height: 5000px;
    background-color: blue;
  }

  .shawty-got-low {
    margin-top: 4800px;
  }
</style>